<!DOCTYPE html PUBLIC>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后台管理中心</title>
    <link rel="stylesheet" href="/admin/css/pintuer.css"/>
    <link rel="stylesheet" href="/admin/css/admin.css"/>
    <link href="/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/admin/js/pintuer.js"></script>
    <script src="/public/js/vue.js"></script>
    <script src="/public/js/axios.js"></script>
    <script src="/public/js/axios-config.js"></script>
    <style>
        .text-container {
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 显示影评详情的模态框 Modal -->
    <div class="modal modal-lg fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">
                        {{ curItem.user ? curItem.user.nickname : '未知用户' }}
                    </h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div v-html="curItem.content || '无评论内容'"></div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" @click="submitCheck(1)">审核通过</button>
                    <button class="btn btn-danger" @click="submitCheck(2)">审核不通过</button>
                </div>
            </div>
        </div>
    </div>
    <!-- // Modal-->
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 影评管理</strong></div>
        <div class="padding border-bottom">
            <ul class="search">
                <li>
                    <a class="button border-green" href="/admin/review/updateoradd.html">
                        <span class="icon-edit"></span> 添加</a>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <thead>
            <tr>
                <th>编号</th>
                <th>会员用户名</th>
                <th>会员昵称</th>
                <th>电影</th>
                <th>评论内容</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!--在这里遍历列表显示记录-->
            <tr v-for="item in list" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.user ? item.user.username : '未知' }}</td>
                <td>{{ item.user ? item.user.nickname : '未知' }}</td>
                <td>{{ item.film ? item.film.name : '未知电影' }}</td> <!-- 修复电影名称可能为null的问题 -->
                <td>
                    <div class="text-container">{{ item.content || '无内容' }}</div>
                    <button class="btn btn-link" data-bs-toggle="modal" data-bs-target="#exampleModal" @click="show(item)">查看详情</button>
                </td>
                <td>
                    <span v-if="item.status === 0" class="text-info">未审核</span>
                    <span v-if="item.status === 1" class="text-success">已审核</span>
                    <span v-if="item.status === 2" class="text-danger">审核未通过</span>
                </td>
                <td>
                    <!-- 可以添加编辑、删除等操作按钮 -->
                    <button class="btn btn-sm btn-primary" :href="'/admin/review/updateoradd.html?id=' + item.id">编辑</button>
                </td>
            </tr>
            <tr v-if="list.length === 0">
                <td colspan="7" align="center">暂无数据</td>
            </tr>
            <tr v-else>
                <td colspan="7" align="center">
                    <nav aria-label="Page navigation ">
                        <ul class="pagination">
                            <li class="page-item" v-if="page.hasPreviousPage">
                                <a class="page-link" href="#" @click.prevent="goto(page.prePage)">上一页</a>
                            </li>
                            <li :class="'page-item ' + (page.pageNum === item ? 'active' : '')"
                                v-for="item in page.navigatepageNums" :key="item">
                                <a class="page-link" href="#" @click.prevent="goto(item)">{{ item }}</a>
                            </li>
                            <li class="page-item" v-if="page.hasNextPage">
                                <a class="page-link" href="#" @click.prevent="goto(page.nextPage)">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </td>
            </tr>
            </tbody>

        </table>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            list: [],
            page: {},
            curItem: {
                user: {}
            },
            params: {
                pageNum: 1,
                pageSize: 5,
                status: null
            }

        },
        methods: {
            show(item) {
                this.curItem = { ...item }; // 深拷贝避免引用问题
            },
            submitCheck(status) {
                if (!this.curItem.id) {
                    alert('评论ID不存在');
                    return;
                }

                let url = `/api/v1/review/updateStatus/${this.curItem.id}/${status}`;
                axios.post(url)
                    .then(res => {
                        // 假设接口返回格式为 {code: 200, message: '成功'}
                        alert(res.data?.message || '操作完成');
                        this.loadData();
                        if (res.data?.code === 200) {
                            document.querySelector("#exampleModal .btn-close").click();
                        }
                    })
                    .catch(error => {
                        console.error('审核操作失败', error);
                        alert('操作失败，请重试');
                    });
            },
            goto(pn) {
                if (pn === this.params.pageNum) return; // 避免重复加载
                this.params.pageNum = pn;
                this.loadData();
            },
            loadData() {
                let url = '/api/v1/review/page';
                axios.post(url, this.params)
                    .then(res => {
                        // 确保数据结构正确
                        this.page = res.data || {};
                        this.list = this.page.list || [];
                    })
                    .catch(error => {
                        console.error('加载数据失败', error);
                        this.list = [];
                        this.page = {};
                    });
            }
        },
        mounted() {
            this.loadData();
        }
    })
</script>
</body>
</html>